<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"  
                xmlns:h="http://java.sun.com/jsf/html"  
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.prime.com.tr/ui"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                template="./../templates/FoodSageTemplate.xhtml">

    <ui:define name="logout">
        <p:commandLink id="logoutLink" actionListener="#{touristLogoutManagedBean.doLogout}" value="#{bundle['login.logout.label']}" ajax="false" immediate="true" />
    </ui:define>

    <ui:define name="main_menu">
        <f:view beforePhase="#{itineraryChooseItineraryTypeManagedBean.initView}"/>
        <p:menubar model="#{itineraryChooseItineraryTypeManagedBean.touristMainMenuModel}"/>
    </ui:define>

    <ui:define name="nav_menu">
        <p:menu model="#{itineraryChooseItineraryTypeManagedBean.touristNavMenuModel}"/>
    </ui:define>

    <ui:define name="content">
        <f:view beforePhase="#{reservationManagerBean.initVisitorConfirm}"/>
        <h:form id="formMain">

            <p:panel id="panel" style="width: 850px;">
                <p:ajaxStatus style="width:16px;height:16px;">
                    <f:facet name="start">
                        <h:graphicImage value="http://www.primefaces.org:8080/showcase/design/ajaxloading.gif" />
                    </f:facet>
                    <f:facet name="complete">
                        <h:outputText value="" />
                    </f:facet>
                </p:ajaxStatus>
                <p:messages/>
                <h:panelGrid columns="2" style="float:left; width: 400px;" >
                    <h:outputText value="Date booked:"/> 
                    <h:outputText value="#{reservationManagerBean.getReservedDate()}" style="font-weight: bold;"/>   
                    <h:outputText value="Number of people:"/> 
                    <h:outputText value="#{reservationManagerBean.reservation.noOfPeople}" style="font-weight: bold;"/>
                    <h:outputText value="Time Booked:"/>         
                    <h:outputText value ="#{reservationManagerBean.getReservedTime()}" style="font-weight: bold;"/>
                    <h:outputText value="Total offline bill: " />
                    <h:outputText value="#{reservationManagerBean.totalBill}" style="font-weight: bold; color:blue;"/>

                    <h:outputText value="Total online bill: " />
                    <h:outputText value="#{reservationManagerBean.discountBill}" style="font-weight: bold; color:red;"/>

                    <h:outputText value="You Save:" />
                    <h:outputText value="#{reservationManagerBean.totalBill - reservationManagerBean.discountBill}" style="font-weight: bold; color:purple;"/>

                    <h:outputText value="Deposit:" />
                    <h:outputText value="#{reservationManagerBean.reservation.deposit}" style="font-weight: bold; color:purple;"/>
                    <h:outputText value="Special request:" />
                    <p:inputTextarea value="#{reservationManagerBean.reservation.specialRequest}" effectDuration="400" rendered="#{!reservationManagerBean.finish}" style="width:300px; height: 200px" maxHeight="200"/>
                    <h:outputText value="#{reservationManagerBean.reservation.specialRequest}" rendered="#{reservationManagerBean.finish}"/> 
                    <p:commandButton id="btn" value="Make Reservation" update="panel"  actionListener="#{reservationManagerBean.makeReservation}" rendered="#{!reservationManagerBean.finish}" style="position: relative; left: 100px;"/>
                </h:panelGrid>                   
                <p:panel id="menu" header="Your menu" style="width:370px; height: 400px; float:left;">

                    <c:forEach items="#{reservationManagerBean.listOfFoodType}" var="food" varStatus="current">
                        <p>
                            <h:outputText value="#{food.name}" styleClass="menu"/>
                            <p:dataList rendered="#{reservationManagerBean.choiceList.size() > current.index}" value="#{reservationManagerBean.choiceList.get(current.index)}" var="selectedMeal" type="ordered" style="width:400%">  
                                #{selectedMeal.name} 
                            </p:dataList> 
                        </p>
                    </c:forEach>
                    <p>
                        <h:outputText value="Set Meal" styleClass="menu" />
                        <p:dataList rendered="#{reservationManagerBean.choiceList.size() != 0}" value="#{reservationManagerBean.choiceList.get(reservationManagerBean.choiceList.size()-1)}" var="selectedProduct" type="ordered" style="width:400%">  
                            #{selectedProduct.name}  
                        </p:dataList> 
                    </p>
                </p:panel>  

                <p:panel>
                    <h1>Table selected</h1>
                    <p:dataTable id="test" var="table" value="#{reservationManagerBean.tableList}" 
                                 rowIndexVar="row" >
                        <p:column headerText="Name" rendered="#{reservationManagerBean.selectedQuantity[row] != 0}">
                            <h:outputText value="#{table.name}" rendered="#{reservationManagerBean.selectedQuantity[row] != 0}"/>
                        </p:column>

                        <p:column headerText="Picture" rendered="#{reservationManagerBean.selectedQuantity[row] != 0}">
                            <h:graphicImage id="gi" alt="The image could not be found."   value="/images/#{table.imageURL}" width="150" height="120" rendered="#{reservationManagerBean.selectedQuantity[row] != 0}"></h:graphicImage>
                        </p:column>
                        <p:column headerText="Description" rendered="#{reservationManagerBean.selectedQuantity[row] != 0}">
                            <h:outputText value="#{table.description}" rendered="#{reservationManagerBean.selectedQuantity[row] != 0}"/>
                        </p:column>

                        <p:column headerText="Seats" rendered="#{reservationManagerBean.selectedQuantity[row] != 0}">
                            <h:outputText value="#{table.unitCapacity}" rendered="#{reservationManagerBean.selectedQuantity[row] != 0}"/>
                        </p:column>

                        <p:column headerText="No of table" rendered="#{reservationManagerBean.selectedQuantity[row] != 0}">
                            <h:outputText  value="#{reservationManagerBean.selectedQuantity[row]}" rendered="#{reservationManagerBean.selectedQuantity[row] != 0}"/>   
                        </p:column>             
                    </p:dataTable>
                </p:panel>
            </p:panel>
        </h:form>
    </ui:define>
</ui:composition>